import './App.css';
import {
  //RouterProvider,
  NavLink,
  Outlet,
  useRoutes
} from "react-router-dom";
import router from './router/index'
//console.log('router',router)

function App() {
  const routes = useRoutes(router.routes);
  console.log('routes',routes.props.match.route.children)
  let data = routes.props.match.route.children;
  return (
    <div className="App container flex">
      <div className="left">
        {/* 左侧内容 */}
        {
            data.length ? (
                <ul className='ul-box'>
                    {
                        data.map((item)=> {
                            console.log('item',item)
                            return (
                              <li key={item.path} className='item-name'>
                                  <NavLink className={({ isActive, isPending }) =>
                                    isActive
                                      ? "active"
                                      : isPending
                                      ? "pending"
                                      : ""
                                  } to={item.path.startsWith('/') ? item.path.slice(1) : item.path}>{item.name}</NavLink>
                              </li>
                          )
                        })
                    }
                </ul>
            ):''
        }
      </div>
      <div className="right flex1">
        <Outlet />
      </div>
    </div>
  );
}

export default App;
